﻿<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <meta content="" name="description" />
    <meta content="" name="author" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


    <link rel="stylesheet" type="text/css" href="../css/dataTables.bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"/>
    <link href="../css/style.css" rel="stylesheet" type="text/css" />

    <style>
        .SortSure,.SortCancel,.AddSure{
            width:96px; height:35px; line-height:35px; color:#fff; background:url(../images/btnbg1.png) repeat-x; font-size:14px; font-weight:bold;border-radius: 3px; cursor:pointer;
        }
        .SortCancel{
            background:url(../images/btnbg2.png) repeat-x;color:#000;font-weight:normal;
        }
        .SortTip {
            width: 485px;
            height: 150px;
            position: absolute;
            top: 10%;
            left: 30%;
            background: #fcfdfd;
            box-shadow: 1px 8px 10px 1px #9b9b9b;
            border-radius: 1px;
            behavior: url(../js/pie.htc);
            display: none;
            z-index: 111111;
        }
    </style>
</head>

<body onload="initDataTable()">
<div class="place">
    <span>位置：</span>
    <ul class="placeul">
        <li><a href="#">大棚管理</a></li>
        <li><a href="#">大棚数据</a></li>
    </ul>
</div>
<!--位置导航-->

    <div class="rightinfo" style="width: 88%">
        <div class="tools">
            <ul class="toolbar">
                <li onclick="AddGreenhouseShow()"><img src="../images/t01.png" />添加</li>
                <li onclick="DeleteAndModifyGreenhouse()"><img src="../images/t03.png" />删除</li>
                <li onclick="QueryGreenhouse()"><img src="../images/search.png" />查询</li>
                <li onclick="DeleteAndModifyGreenhouse()"><img src="../images/t02.png" />修改</li>
                <li onclick="ExportGreenhouse()"><img src="../images/export.png" />导出</li>
                <li onclick="PrintGreenhouseTable()"><img src="../images/print.png" />打印</li>
                <li onclick="SortShow()"><img src="../images/sort.png" />排序</li>
                <li onclick="StatisticsShow()"><img src="../images/t04.png" />统计</li>
            </ul>
        </div>
         <!--工具栏-->

        <div>
            <div style="margin:10px;padding-right:0">
                <table class="table table-striped table-bordered table-hover datatable" id="record_list">
                    <thead>
                    <tr>
                        <th class="table-checkbox"><input type="checkbox" class="group-checkable" data-set="#record_list .checkboxes" /></th>
                        <th>大棚名称</th>
                        <th>大棚状态</th>
                        <th>大棚信息备注</th>
                        <th>信息录入时间</th>
                        <th>大棚管理人员</th>
                        <th>大棚规模（0-3）</th>
                        <th>修改/删除/查看</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
        <!--datatable数据显示-------------------------------------------------------------------------------------------->

        <!--提示信息,class中定义其为不可见的-->
        <!--增加-------------------------------------------------------------------------------------------------------->
        <div class="tip" id="add_greenhouse_tip" style="background: turquoise;height: auto" >
            <div class="tiptop"><span>增加提示</span><a></a></div>

            <div style="position:relative; width: 80%; height: 12%; left: 10%; right: 10%; top: 8%; transform: translate(-10%,0);">
                <label style="position: relative; width: 20%; float: left">大棚名称</label>
                <label>
                    <input id="greenhouse_name" type="text" style="position:relative; width: 80%; float: left" value="">
                </label>
            </div>

            <div style="position:relative; width: 80%; height: 12%; left: 10%; right: 10%; top: 8%; transform: translate(-10%,0)">
                <label style="position: relative; width: 20%; float: left">大棚状态</label>
                <label>
                    <input id="greenhouse_status" type="text" style="position:relative; width: 80%; float: left" value="">
                </label>
            </div>

            <div style="position:relative; width: 80%; height: 12%; left: 10%; right: 10%; top: 8%; transform: translate(-10%,0)">
                <label style="position: relative; width: 20%; float: left">信息备注</label>
                <label>
                    <input id="greenhouse_remark" type="text" style="position:relative; width: 80%; float: left" value="">
                </label>
            </div>

            <div style="position:relative; width: 80%; height: 12%; left: 10%; right: 10%; top: 8%; transform: translate(-10%,0)">
                <label style="position: relative; width: 20%; float: left">录入时间</label>
                <label>
                    <input id="greenhouse_datetime" type="text" style="position:relative; width: 80%; float: left" value="">
                </label>
            </div>

            <div style="position:relative; width: 80%; height: 12%; left: 10%; right: 10%; top: 8%; transform: translate(-10%,0)">
                <label style="position: relative; width: 20%; float: left">管理员</label>
                <label>
                    <input id="greenhouse_manager" type="text" style="position:relative; width: 80%; float: left" value="">
                </label>
            </div>

            <div style="position:relative; width: 80%; height: 12%; left: 10%; right: 10%; top: 8%; transform: translate(-10%,0)">
                <label style="position: relative; width: 20%; float: left">大棚规模（0-3）</label>
                <label>
                    <input id="greenhouse_size" type="text" style="position:relative; width: 80%; float: left" value="">
                </label>
            </div>
            <!--tip中的button-->
            <div class="tipbtn">
                <input name="" type="button"  class="AddSure" value="添加" onclick="AddGreenhouseRecord()"/>
                <input name="" type="button"  class="cancel" value="取消" />
            </div>

        </div>

        <!-- 修改------------------------------------------------------------------------------------------------------->
        <div class="tip" id="modify_greenhouse_tip" style="background: turquoise; height: 650px; top: 0;width: 40%" >
            <div class="tiptop"><span>修改提示</span><a></a></div>

            <div style="position:relative; width: 100%; height: 12%; top: 8%;">
                <div style="position:relative;  width: 50%; float: left;">
                    <label style="position: relative;">原大棚名称:</label>
                    <b id="oldGreenhouse_name">greenhouse_name</b>
                </div>
                <div style="position:relative; width: 50%; float: right">
                    <label style="position: relative;">新大棚名称:</label>
                    <label>
                        <input type="text" id="newGreenhouse_name">
                    </label>
                </div>
            </div>
            <div style="position:relative; width: 100%; height: 12%; top: 8%;">
                <div style="position:relative;  width: 50%; float: left;">
                    <label style="position: relative;">原大棚状态:</label>
                    <b id="oldGreenhouse_status">greenhouse_status</b>
                </div>
                <div style="position:relative; width: 50%; float: right">
                    <label style="position: relative;">新大棚状态:</label>
                    <label>
                        <input type="text" id="newGreenhouse_status">
                    </label>
                </div>
            </div>
            <div style="position:relative; width: 100%; height: 12%; top: 8%;">
                <div style="position:relative;  width: 50%; float: left;">
                    <label style="position: relative;">原大棚备注:</label>
                    <b id="oldGreenhouse_remark">greenhouse_remark</b>
                </div>
                <div style="position:relative; width: 50%; float: right">
                    <label style="position: relative;">新大棚备注:</label>
                    <label>
                        <input type="text" id="newGreenhouse_remark">
                    </label>
                </div>
            </div>
            <div style="position:relative; width: 100%; height: 12%; top: 8%;">
                <div style="position:relative;  width: 50%; float: left;">
                    <label style="position: relative;">原大棚录入时间:</label>
                    <b id="oldGreenhouse_datetime">greenhouse_datetime</b>
                </div>
                <div style="position:relative; width: 50%; float: right">
                    <label style="position: relative;">新大棚录入时间:</label>
                    <label>
                        <input type="text" id="newGreenhouse_datetime">
                    </label>
                </div>
            </div>
            <div style="position:relative; width: 100%; height: 12%; top: 8%;">
                <div style="position:relative;  width: 50%; float: left;">
                    <label style="position: relative;">原大棚管理员:</label>
                    <b id="oldGreenhouse_manager">greenhouse_manager</b>
                </div>
                <div style="position:relative; width: 50%; float: right">
                    <label style="position: relative;">新大棚管理员:</label>
                    <label>
                        <input type="text" id="newGreenhouse_manager">
                    </label>
                </div>
            </div>
            <div style="position:relative; width: 100%; height: 12%; top: 8%;">
                <div style="position:relative;  width: 50%; float: left;">
                    <label style="position: relative;">原大棚规模:</label>
                    <b id="oldGreenhouse_size">greenhouse_size</b>
                </div>
                <div style="position:relative; width: 50%; float: right">
                    <label style="position: relative;">新大棚规模:</label>
                    <label>
                        <input type="text" id="newGreenhouse_size">
                    </label>
                </div>
            </div>
            <!--tip中的button-->
            <div class="tipbtn">
                <input name="" type="button"  class="AddSure" style="position:relative; left: 50%; right: 50%;" value="修改" onclick="ModifyGreenhouseRecord()"/>
            </div>

        </div>

        <!--查询-------------------------------------------------------------------------------------------------------->
        <div class="tip" id="Query_greenhouse">
            <div class="tiptop"><span>查询提示</span><a></a></div>
            <div class="tipinfo">
                <span><img src="../images/tip.png" /></span>
                <div class="tipright">
                    <p id="">在表格右上方中的查询栏输入任意字段进行查询</p>
                </div>
            </div>
            <!--tip中的button-->
            <div class="tipbtn">
                <input name="" type="button"  class="sure" value="确定" />
                <input name="" type="button"  class="cancel" value="取消" />
            </div>

        </div>

        <!--导出------------------------------------------------------------------------------------------------------->
        <div class="tip" id="export_file_tip">
            <div class="tiptop"><span>导出提示</span><a></a></div>
            <div class="tipinfo">
                <span><img src="../images/tip.png" /></span>
                <div class="tipright">
                    <p id="flag"></p>
                    <cite><a href="" id="txtDownLoadHref">[点击下载txt]</a></cite>
                    <cite><a href="" id="excelDownLoadHref">[点击下载excel]</a></cite>
                </div>
            </div>
            <!--tip中的button-->
            <div class="tipbtn">
                <input name="" type="button"  class="sure" value="确定" />
                <input name="" type="button"  class="cancel" value="取消" />
            </div>

        </div>

        <!--排序-------------------------------------------------------------------------------------------------------->
        <div class="SortTip" id="Sort_tip">
            <div class="tiptop"><span>选择排序方式</span><a id="shutDown" onclick="SelectSortWay()"></a></div>
            <!--tip中的button-->
            <div class="tipbtn">
                <input name="" type="button"  class="SortSure" value="升序" onclick="SelectUpWay()"/>
                <input name="" type="button"  class="SortCancel" value="降序" onclick="SelectDownWay()" />
            </div>
        </div>

        <!--统计-------------------------------------------------------------------------------------------------------->
       <div class="Tip" id="Statistics_tip">
        <div class="tiptop"><span>统计提示</span><a></a></div>
           <div class="tipbtn">
               <input name="" type="button"  class="StatisticsSure" value="开始统计" onclick="StatisticsShow()"/>
           </div>
    </div>

    </div>
<!--datatable-->
</body>
<!-- END BODY -->
</html>

<script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../js/jquery.uniform.min.js"></script>
<script type="text/javascript" src="../js/jquery.dataTables.min.js"></script>
<!--<script src="js/greenhouse_record_list.js" type="text/javascript"></script>-->

<script>
    // 保存当前的dataTable信息
    let type=this.location.search;
    let data=type.split("sort=");
    let sort=data[1];
    // 获取上页传入的信息
    sort=decodeURI(sort);

    //添加--------------------------------------------------------------------------------------------------------------
    function AddGreenhouseShow(){
        let addTip=document.getElementById("add_greenhouse_tip");
        addTip.style.display="block";
    }
    // 目前还为对输入的合法性进行验证
    function AddGreenhouseRecord(){
        let greenhouse_name=document.getElementById("greenhouse_name").value;
        let greenhouse_status=document.getElementById("greenhouse_status").value;
        let greenhouse_remark=document.getElementById("greenhouse_remark").value;
        let greenhouse_datetime=document.getElementById("greenhouse_datetime").value;
        let greenhouse_manager=document.getElementById("greenhouse_manager").value;
        let greenhouse_size=document.getElementById("greenhouse_size").value;
        if(greenhouse_name==="" || greenhouse_status===""||greenhouse_remark===""||greenhouse_datetime===""||greenhouse_manager===""||greenhouse_size===""){
            alert("请填写完整信息");
        }
        let message={};
        message.Action="add_greenhouseInfo";
        message.greenhouse_name=greenhouse_name;
        message.greenhouse_status=greenhouse_status;
        message.greenhouse_remark=greenhouse_remark;
        message.greenhouse_datetime=greenhouse_datetime;
        message.greenhouse_manager=greenhouse_manager;
        message.greenhouse_size=greenhouse_size;
        let url="../greenhouseModule_file_servlet_action";
        $.post(url,message,function(json){
            if(json.ok===200){
                // 重新加载页面
                alert("添加成功!");
                window.location.reload();
            }else{
                alert("添加失败，请确定联网，稍后重试!");
            }
        })

    }

    //删除或修改---------------------------------------------------------------------------------------------------------
    function DeleteAndModifyGreenhouse(){
        alert("请在表格最后一栏中直接删除或修改");
    }
    // 删除
    function DeleteGreenhouseRecord(id){
        if(confirm("您确定要删除这条记录吗？")){
            if(id>-1){
                let url="../greenhouseModule_file_servlet_action";
                let message={};
                message.Action="delete_greenhouseInfo";
                message.id=id;
                message.tableName="greenhouse_file";
                $.post(url,message,function(json){
                    if(json.ok===200){
                        // 重新加载页面
                        alert("删除成功");
                        window.location.reload();
                    }else{
                        alert("删除失败，请确定联网，稍后重试!");
                    }
                });
            }
        }
    }
    //修改--------------------------------------------------------------------------------------------------------------
    let Modify_id;
    function ModifyGreenhouseShow(id){
        Modify_id=id;
        document.getElementById("modify_greenhouse_tip").style.display="block";
        for(let i=0;i<resultList.length;i++){
            if(id==resultList[i].greenhouse_id){
                document.getElementById("oldGreenhouse_name").innerText=resultList[i].greenhouse_name;
                document.getElementById("oldGreenhouse_status").innerText=resultList[i].greenhouse_status;
                document.getElementById("oldGreenhouse_remark").innerText=resultList[i].greenhouse_remark;
                document.getElementById("oldGreenhouse_datetime").innerText=resultList[i].greenhouse_datetime;
                document.getElementById("oldGreenhouse_manager").innerText=resultList[i].greenhouse_manager;
                document.getElementById("oldGreenhouse_size").innerText=resultList[i].greenhouse_size;
            }
        }
    }
    function ModifyGreenhouseRecord(){
        let message={};
        let url="../greenhouseModule_file_servlet_action";
        message.id=Modify_id;
        let newGreenhouse_name=document.getElementById("newGreenhouse_name").value;
        let newGreenhouse_status=document.getElementById("newGreenhouse_status").value;
        let newGreenhouse_remark=document.getElementById("newGreenhouse_remark").value;
        let newGreenhouse_datetime=document.getElementById("newGreenhouse_datetime").value;
        let newGreenhouse_manager=document.getElementById("newGreenhouse_manager").value;
        let newGreenhouse_size=document.getElementById("newGreenhouse_size").value;
        message.Action='modify_greenhouseInfo';
        message.greenhouse_name=newGreenhouse_name;
        message.greenhouse_status=newGreenhouse_status;
        message.greenhouse_remark=newGreenhouse_remark;
        message.greenhouse_datetime=newGreenhouse_datetime;
        message.greenhouse_manager=newGreenhouse_manager;
        message.greenhouse_size=newGreenhouse_size;
        console.log(message);
        document.getElementById("modify_greenhouse_tip").style.display="none";
        $.post(url,message,function(json){
            if(json.ok===200){
                alert("修改成功!");
                // 重新加载页面
                window.location.reload();
            }else{
                alert("修改失败，请确定联网，稍后重试!");
            }
        });
    }

    //查询--------------------------------------------------------------------------------------------------------------
    function QueryGreenhouse(){
        document.getElementById("Query_greenhouse").style.display="block";
    }

    //导出--------------------------------------------------------------------------------------------------------------
    function ExportGreenhouse() {
        alert("开始导出!");
        let tip=document.getElementById("export_file_tip");
        // 建议JAVA后端查询得到的JSON直接导出，而不是前端向后端传递JSON再导出
        let message = {};
        let url = "../greenhouseModule_file_servlet_action";
        message.Action = "exportFile";
        // 表名
        message.tableName='greenhouse_file';
        $.post(url, message, function (json) {
            if (json.ok === 200) {
                // 显示tip
                tip.style.display="block";
                document.getElementById("flag").innerText="导出成功!";
                $("#txtDownLoadHref").attr("href",json.txtDownloadPath);
                $("#excelDownLoadHref").attr("href",json.excelDownloadPath);
            } else {
                tip.style.display="block";
                document.getElementById("flag").innerText="导出失败!";
            }
        });
    }
    //打印--------------------------------------------------------------------------------------------------------------
    function PrintGreenhouseTable(){
        alert("即将前往Print");
        window.parent.location.href="printgreenhousetable.html?sort="+sort;
    }
    //排序--------------------------------------------------------------------------------------------------------------
    function SortShow(){
        alert("您可以通过选择排序方式，依照按照大棚名称进行排序，也可以之间点击下面表中的属性名，按照该属性进行排序");
        document.getElementById("Sort_tip").style.display="block";
    }
    function SelectSortWay(){
        document.getElementById("Sort_tip").style.display="none";
    }
    function SelectUpWay(){
        sort="up";
        document.getElementById("Sort_tip").style.display="none";
        SortStart();
    }
    function SelectDownWay(){
        sort="down";
        document.getElementById("Sort_tip").style.display="none";
        SortStart();
    }
    function SortStart(){
        if(sort==="up" || sort==="down"){
            init();
            window.location.href="greenhouse_list.html?sort="+sort;
        }
    }

    //统计--------------------------------------------------------------------------------------------------------------
    function StatisticsShow(){
        alert("开始统计");
        window.location.href="statisticgreenhouse.html";
    }

    //查看大棚信息-------------------------------------------------------------------------------------------------------
    function CheckGreenhouseList(id){
        alert("即将前往");
        var Parent_id =id;
        console.log(Parent_id);
        window.parent.location.href="../left_greenhouse_menu/greenhouse_main.html?value="+Parent_id;
    }

    function initDataTable(){
        // 全局设置监听
        $(".sure").click(function (){
            $(".tip").fadeOut(100);
        });
        // 2.弹窗的取消
        $(".cancel").click(function (){
            $(".tip").fadeOut(100);
        });
        $(".tiptop a").click(function (){
            $(".tip").fadeOut(100);
        });
        // 初始化DataTable！
        init();
    }

    var resultList=[];
    //获取大棚信息-------------------------------------------------------------------------------------------------------
    function init(){
        $('.datatable').dataTable({
            "paging": true,
            "searching": true,
            "retrieve":true,
             //"destroy":true,
            "oLanguage": {
                "aria": {
                    "sortAscending": ": activate to sort column ascending",
                    "sortDescending": ": activate to sort column descending"
                },
                "sProcessing": "处理中...",
                "sLengthMenu": "_MENU_ 记录/页",
                "sZeroRecords": "没有匹配的记录",
                "sInfo": "显示第 _START_ 至 _END_ 项记录，共 _TOTAL_ 项",
                "sInfoEmpty": "显示第 0 至 0 项记录，共 0 项",
                "sInfoFiltered": "(由 _MAX_ 项记录过滤)",
                "sInfoPostFix": "",//在摘要信息后继续追加的字符串
                "sSearch": "查询:",
                "oPaginate": {
                    "sFirst": "首页",
                    "sPrevious": "上页",
                    "sNext": "下页",
                    "sLast": "末页"
                }
            },
            "aoColumns": [{
                "mRender": function (data, type, full) {
                    sReturn = '<input type="checkbox" class="checkboxes" value="' + data + '"/>';
                    return sReturn;
                }, "orderable": false
            }, {
                "mRender": function (data, type, full) {
                    sReturn = "<div>"+full.greenhouse_name+"</div>";
                    return sReturn;
                }, "orderable": true
            }, {
                "mRender": function (data, type, full) {
                    sReturn = "<div>"+full.greenhouse_status+"</div>";
                    return sReturn;
                }, "orderable": true
            },  {
                "mRender": function (data, type, full) {
                    sReturn ="<div>"+full.greenhouse_remark+"</div>";
                    return sReturn;
                }, "orderable": true
            },{
                "mRender": function (data, type, full) {
                    sReturn = "<div>"+full.greenhouse_datetime+"</div>";
                    return sReturn;
                }, "orderable": true
            },{
                "mRender": function (data, type, full) {
                    sReturn = "<div>"+full.greenhouse_manager+"</div>";
                    return sReturn;
                }, "orderable": true
            }, {
                "mRender": function (data, type, full) {
                    sReturn = "<div>"+full.greenhouse_size+"</div>";
                    return sReturn;
                }, "orderable": true
            },{
                "mRender": function (data, type, full) {
                    resultList.push(full);
                    sReturn = "<a href=\"javascript:ModifyGreenhouseShow("+full.greenhouse_id+")\">【修改记录】</a><a href=\"javascript:DeleteGreenhouseRecord(" + full.greenhouse_id + ")\">【删除记录】</a><a href=\"javascript:CheckGreenhouseList(" + full.greenhouse_id + ")\">【查看大棚】</a>";
                    return sReturn;
                }, "orderable": true
            }
            ],
            "aLengthMenu": [[10, 20, 30, 40, 50, 60, 70, -1], [10, 20, 30, 40, 50, 60, 70, "所有记录"]],
            "fnDrawCallback": function () {
                $(".checkboxes").uniform();
                $(".group-checkable").uniform();
            },
            "sAjaxSource": "../greenhouseModule_file_servlet_action?Action=getGreenhouseRecordList&sort="+sort

        });
        $('.datatable').find('.group-checkable').change(function () {
            var set = jQuery(this).attr("data-set");
            var checked = jQuery(this).is(":checked");
            jQuery(set).each(function () {
                if (checked) {
                    $(this).attr("checked", true);
                    $(this).parents('tr').addClass("active");
                } else {
                    $(this).attr("checked", false);
                    $(this).parents('tr').removeClass("active");
                }
            });
            jQuery.uniform.update(set);
        });
        $('.datatable').on('change', 'tbody tr .checkboxes', function () {
            $(this).parents('tr').toggleClass("active");
        });
    }
</script>